<template>
	<view class="goods-list">
		<goods-list :goodsList="goodsList"></goods-list>
		<view class="footer" v-if="pageNum == 20">----------我是有底线的---------</view>
	</view>
</template>

<script>
	import GoodsList from "../../components/goodslist/GoodsList.vue"
	export default {
		components: {
			GoodsList,
		},
		data() {
			return {
				goodsList: [],
				pageNum : 0,//模拟页面, 没有数据了,显示底部样式
			}
		},
		//页面加载事件
		onLoad(){
			this.getGoodsList()
			
			
		},
		onShow() {
			console.log("显示了")
			//重置页面
			this.pageNum = 0;
			//重置数据
			this.goodsList = []
		},
		//页面触底事件
		onReachBottom(){
			this.getGoodsList()
			
		},
		//下拉加载事件
		onPullDownRefresh() {
			console.log("下拉加载")
			this.pullGoodsList(() => {
				uni.stopPullDownRefresh()
			})
			
		},
		methods: {
			//请求商品页数据
			async getGoodsList() {
				this.pageNum++
				const data = await uni.request({
					url: `http://localhost:4000/goods?type=pop&page=${this.pageNum}`
				})
				this.goodsList = [...this.goodsList,...data[1].data.data.list]
			
			},
			//下拉请求数据的方法
			async pullGoodsList(callback) {
				this.pageNum++
				const data = await uni.request({
					url: `http://localhost:4000/goods?type=pop&page=${this.pageNum}`
				})
				this.goodsList = [...data[1].data.data.list,...this.goodsList]
				callback()
			}
		}
	}
</script>

<style>
.goods-list {
	background-color: #eee;
}
.footer {
	text-align: center;
}
</style>
